<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <style type="text/css">
        body {
            background-color: #F2F2F2;
        }
        .pic {
            float: left;
            padding-top: 35px;
        }
        img {
            width: 500px;
            height: 360px;
        }
        .container {
            float: left;
            background-color: #fff;
            width: 380px;
            height: auto;
            padding: 10px 20px;
            border-radius: 8px;
        }
        .container div {
            margin-bottom: 10px;
        }
        .container label {
            display: inline-block;
            width: 80px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div class="pic">
        <img src="../exp5/img/1.png" alt="注册配图">
    </div>
    <div class="container">
        <form id="registerForm" action="register.do" method="post">
            <div class="user">
                <label for="username">*用户名</label>
                <input type="text" name="username" id="username">
            </div>
            <div class="psw">
                <label for="password">*密码</label>
                <input type="password" name="password" id="password"><br>
                <label for="confirmedpassword">*确认密码</label>
                <input type="password" name="confirmedpassword" id="confirmedpassword">
            </div>
            <div class="sex">
                <label>性别</label>
                <input name="xb" type="radio" value="男">男
                <input name="xb" type="radio" value="女" checked>女
            </div>
            <div class="birth">
                <label for="birthday">出生年月</label>
                <input type="text" name="birthday" id="birthday" placeholder="yyyy/mm/dd">
            </div>
            <div class="mail">
                <label for="mailbox">*邮箱</label>
                <input type="text" name="mailbox" id="mailbox">
            </div>
            <div class="job">
                <label for="select">职业</label>
                <select name="select" id="select">
                    <option value="学生" selected>学生</option>
                    <option value="老师">老师</option>
                    <option value="在职人员">在职人员</option>
                </select>
            </div>

            <!-- 新增：省市联动 -->
            <div class="location">
                <label>省份</label>
                <select id="province" name="province">
                    <option value="">请选择省份</option>
                </select>
                <br>
                <label>城市</label>
                <select id="city" name="city">
                    <option value="">请选择城市</option>
                </select>
            </div>

            <div class="hobby">
                <label>爱好</label>
                <input type="checkbox" name="ah" value="01">读书看报
                <input type="checkbox" name="ah" value="02">影视娱乐
                <input type="checkbox" name="ah" value="03">棋牌娱乐
                <input type="checkbox" name="ah" value="04">电脑网络
                <input type="checkbox" name="ah" value="05">书法绘画
                <input type="checkbox" name="ah" value="06">吃饭睡觉
            </div>
            <div class="intro">
                <label for="textarea">个人说明</label><br>
                <textarea name="textarea" id="textarea" rows="4" cols="40"></textarea>
            </div>
            <div class="bottom">
                <input type="submit" value="提交">
                <input type="reset" value="清除">
            </div>
        </form>
    </div>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 表单校验和省市联动 -->
<script>
    $(function () {
        // 表单校验
        $('#registerForm').on('submit', function (e) {
            e.preventDefault();

            const userName = $.trim($('#username').val());
            const pwd1 = $('#password').val();
            const pwd2 = $('#confirmedpassword').val();
            const email = $.trim($('#mailbox').val());

            if (userName === "") {
                alert("用户名不能为空！");
                $('#username').focus();
                return false;
            }

            if (pwd1 !== pwd2) {
                alert("两次输入的密码不一致，请重新输入！");
                $('#password').focus();
                return false;
            }

            const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
            if (!emailPattern.test(email)) {
                alert("请输入正确的邮箱地址！");
                $('#mailbox').focus();
                return false;
            }

            this.submit();
        });

        // 模拟省市数据
        const provinceCityMap = {
            '江苏省': ['南京市', '苏州市', '无锡市'],
            '浙江省': ['杭州市', '宁波市', '温州市'],
            '广东省': ['广州市', '深圳市', '珠海市']
        };

        // 加载省份
        for (let prov in provinceCityMap) {
            $('#province').append(`<option value="${prov}">${prov}</option>`);
        }

        // 省份改变时，加载对应城市
        $('#province').on('change', function () {
            const selected = $(this).val();
            const $city = $('#city');
            $city.empty().append('<option value="">请选择城市</option>');
            if (selected && provinceCityMap[selected]) {
                provinceCityMap[selected].forEach(city => {
                    $city.append(`<option value="${city}">${city}</option>`);
                });
            }
        });
    });
</script>
</body>
</html>
